<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>头</title>
</head>
<style>
    #top {
        height: 20%;
        border: 1px solid red;
    }

    img {
        width: 100px;
        height: 100px;
    }

    #right {
        margin-left: 5px;
        border: 1px solid red;
        width: 89%;
        height: 78%;
        float: right;
    }

    #left {
        border: 1px solid red;
        width: 10%;
        height: 78%;
        float: left;
    }
</style>
<script>
    $(function () {

        $("#detail-img").click(function () {
            // 点击图片时触发文件表单控件
            $("#picFile").click();
        });

        $("#picFile").change(function () {
            // 构造文件上传form
            var formData = new FormData();
            formData.append("iconFile", document.getElementById("picFile").files[0]);

            // 上传图片
            $.ajax({
                url: "/img/updatePic",
                processData: false,      //默认为true,对请求传递的参数(formData)不做编码处理
                contentType: false,       //不对请求头做处理
                data: formData,
                type: "post",
                dataType: "json",
                async: true,
                success: function (data) {
                    if (data.code == '200') {
                        //成功
                        $("#detail-img").attr("src", "/img/getImg?pic=" + data.msg);

                    } else {
                        console.log("失败")
                    }
                }
            });

        });
    });

</script>
<body>
<div id="top">
    <img id="detail-img" src="/img/getImg?pic=${user.pic}" alt="加载中"/>

    <!-- 真正的头像图片上传表单 -->
    <input type="file" id="picFile" style="display: none;">


    <%--<form action="/img/updatePic" method="post" enctype="multipart/form-data">--%>
    <%--<input type="file" name="fileName">--%>
    <%--<input type="submit" value="修改图片">--%>
    <%--</form>--%>

</div>
</body>
</html>
